<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="logo">Logo</view>
			<view class="menu">
				<view v-for="(item, index) in menuItems" :key="index" class="menu-item">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" autoplay circular indicator-dots>
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item" mode="aspectFill" class="swiper-image" />
			</swiper-item>
		</swiper>

		<!-- 内容区域 -->
		<view class="content">
			<view class="section">
				<view class="section-title">产品展示</view>
				<view class="product-list">
					<view v-for="(item, index) in productList" :key="index" class="product-item">
						<image :src="item.image" mode="aspectFill" class="product-image" />
						<view class="product-name">{{ item.name }}</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-title">新闻动态</view>
				<view class="news-list">
					<view v-for="(item, index) in newsList" :key="index" class="news-item">
						<view class="news-title">{{ item.title }}</view>
						<view class="news-date">{{ item.date }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部信息栏 -->
		<view class="footer">
			<view class="footer-text">© 2023 公司名称. 版权所有.</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 顶部导航栏菜单
			menuItems: ['首页', '产品', '新闻', '关于我们', '联系我们'],
			// 轮播图列表
			swiperList: [
				'https://via.placeholder.com/750x400',
				'https://via.placeholder.com/750x400',
				'https://via.placeholder.com/750x400'
			],
			// 产品列表
			productList: [
				{ image: 'https://via.placeholder.com/200x200', name: '产品 1' },
				{ image: 'https://via.placeholder.com/200x200', name: '产品 2' },
				{ image: 'https://via.placeholder.com/200x200', name: '产品 3' }
			],
			// 新闻列表
			newsList: [
				{ title: '新闻标题 1', date: '2023-10-01' },
				{ title: '新闻标题 2', date: '2023-10-02' },
				{ title: '新闻标题 3', date: '2023-10-03' }
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 顶部导航栏 */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: #333;
	color: #fff;
}

.logo {
	font-size: 20px;
	font-weight: bold;
}

.menu {
	display: flex;
}

.menu-item {
	margin-left: 20px;
	font-size: 16px;
}

/* 轮播图 */
.swiper {
	width: 100%;
	height: 400rpx;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

/* 内容区域 */
.content {
	padding: 20px;
}

.section {
	margin-bottom: 30px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.product-list {
	display: flex;
	justify-content: space-between;
}

.product-item {
	width: 30%;
	text-align: center;
}

.product-image {
	width: 100%;
	height: 200rpx;
	border-radius: 10rpx;
}

.product-name {
	margin-top: 10px;
	font-size: 14px;
}

.news-list {
	display: flex;
	flex-direction: column;
}

.news-item {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.news-title {
	font-size: 16px;
}

.news-date {
	font-size: 12px;
	color: #999;
}

/* 底部信息栏 */
.footer {
	padding: 20px;
	text-align: center;
	background-color: #333;
	color: #fff;
}

.footer-text {
	font-size: 14px;
}
</style>